<template>
   <div class="login">
      <!-- 顶部导航 -->
      <van-nav-bar title="京东登陆" left-text="返回" left-arrow @click-left="$router.back()" />

      <!-- 用户登陆表单 -->
      <van-form @submit="onSubmit" validate-trigger="onChange" validate-first>
         <van-cell-group inset>
            <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[
            { required: true, message: '请填写用户名' },
            {pattern,message:'用户名必须是6-12位字符'}]" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
               :rules="[{ required: true, message: '请填写密码' },{pattern,message:'密码必须是6-12位字符'}]" />
         </van-cell-group>
         <div style="margin: 16px;">
            <van-button round block type="danger" native-type="submit">
               提交
            </van-button>
         </div>
      </van-form>

      <!-- 快速注册 -->
      <van-cell-group title="去注册">
         <van-cell title="快速注册" 
         is-link to="/register/stepOne"
         />
      </van-cell-group>
   </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router'
import { login } from '@/apis/user'
import { useUserStore } from '@/store/userStore'
const user =useUserStore()
//用户名和密码给个初始值
const username = ref(user.tel)
const password = ref('')
//创建用户实例
// 路由实例
const router = useRouter()
//定义用户名和密码都能用的第二条校验规则
const pattern = /^.{6,12}$/
//表单提交触发的事件处理函数

const onSubmit = () => {
   login(username.value, password.value)
      .then(res => {
         if ((res as any).code === '200') {
            //设置store里的useris
            user.setUserId(res.data.userid)
            //登陆成功跳转首页
            router.push('/')
         }

      })

}
</script>

<style scoped lang='scss'>
.van-form {
   padding-top: 25px;
}
</style>
